<template>
	<div>
		<!-- 顶部区域 -->
		<div class="category-list">
			<van-tag type="primary" v-for="item in categoryList" :key="item.id"
				@click="onClickGetPhotoListByCategoryId(item.id)">
				{{ item.title }}
			</van-tag>
		</div>
		<ul class="photo-list">
			<router-link v-for="item in photoList" :key="item.id" :to="{ name: 'photoDetail', params: { id: item.id } }"
				tag="li">
				<!-- 使用图片懒加载 -->
				<van-image lazy-load :src="`${APIDomainName}${item.img}`">
					<template v-slot:loading>
						<van-loading type="spinner" size="20" />
					</template>
				</van-image>
				<div class="info">
					<h1 class="info-title van-ellipsis">{{ item.title }}</h1>
					<div class="info-body van-multi-ellipsis--l3">
						{{ item.summary }}
					</div>
				</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
	//懒加载
	import Vue from "vue";
	import {
		Lazyload
	} from "vant";
	Vue.use(Lazyload);

	import {
		getPhotoCategory,
		getPhotoListByCategoryId,
	} from "@/api/photo.js";

	export default {
		data() {
			return {
				categoryList: [], // 所有分类的列表数组
				photoList: [], // 图片列表的数组
				categoryId: 0,
			};
		},

		created() {
			getPhotoCategory().then(result => {
				this.categoryList = result.data;
			});
			this.onClickGetPhotoListByCategoryId(0);
			// let categoryId = this.categoryId;
			// 根据分类Id,获取图片列表
			// getPhotoListByCategoryId(categoryId).then(result => {
			// 	this.photoList = result.data;
			// });
		},
		methods:{
			onClickGetPhotoListByCategoryId(categoryId) {
				this.categoryId = categoryId;
				// 根据分类Id,获取图片列表
				getPhotoListByCategoryId(categoryId).then(result => {
					this.photoList = result.data;
					if (this.photoList.length == 0) {
						this.$toast("没有记录数据");
					}
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	.category-list {
		font-size: 13px;
		margin: 10px;
	}

	.van-tag {
		margin: 2px;
	}

	.photo-list {
		list-style: none;
		margin: 0;
		padding-bottom: 10px;

		li {
			background-color: #ccc;
			text-align: center;
			margin: 10px;
			box-shadow: 0 0 9px #999;
			position: relative;

			.van-image {
				width: 100%;
				vertical-align: middle;
			}

			.info {
				padding-left: 5px;
				padding-right: 5px;
				color: white;
				text-align: left;
				position: absolute;
				bottom: 10px;
				background-color: rgba(0, 0, 0, 0.4);
				max-height: 84px;

				.info-title {
					font-size: 14px;
				}

				.info-body {
					font-size: 13px;
				}
			}
		}
	}
</style>
